<template>
  <div>


    <!-- 条件查询 -->
    <el-form ref="form" :model="form" label-width="100%">
      <span>优惠名称:</span> <el-input v-model="form.gname" placeholder="请输入" style="width: 150px; "></el-input>

      <span style="margin-left: 20px;">是否有效</span> <el-select v-model="form.gcid" placeholder="全部" clearable
        class="jiaofei">
        <el-option label="有效" value="0"></el-option>
        <el-option label="无效" value="1"></el-option>
      </el-select>

      <!-- 按钮 -->
      <el-button type="primary" @click="findPage" style="margin-left: 20px;">查询</el-button>
      <el-button type="success" @click="Newoffers">新增优惠</el-button>
    </el-form><br><br>

    <!-- 优惠配置表格 展示 -->
    <el-table :data="JiaoFeiData" border style="width: 100%">
      <el-table-column prop="id" label="优惠名称">
      </el-table-column>
      <el-table-column prop="gid" label="优惠规则">
      </el-table-column>
      <el-table-column prop="gname" label="优惠费项">
      </el-table-column>
      <el-table-column prop="gdesc" label="开始日期">
      </el-table-column>
      <el-table-column prop="gnum" label="结束日期">
      </el-table-column>
      <el-table-column prop="gnum" label="状态">
      </el-table-column>
      <el-table-column prop="gnum" label="设置人">
      </el-table-column>
      <el-table-column prop="gnum" label="设置时间">
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button @click="showDetails(scope.row.id)" type="text">详情</el-button>
          <el-button @click="toUpdate(scope.row)" type="text">编辑</el-button>
          <el-button @click="Enable(scope.row.id)" type="text">启用</el-button>
          <el-button @click="Delete(scope.row.id)" type="text" style="color: red;">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
      :page-sizes="[7, 10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 新增优惠弹出框 -->
    <el-dialog :title="form.id == null ? '新增' : '编辑'" :visible.sync="dialogFormVisible">
      <span><b>基本信息</b></span>
      <hr>
      <el-form :model="form">
        <el-form-item label="优惠名称" :label-width="formLabelWidth" style="margin-left: 70px;">
          <el-input v-model="form.name" autocomplete="off" style="width: 600px;" placeholder="请输入"></el-input>
        </el-form-item>


        <el-form-item label="优惠时段" style="margin-left: 70px;">
          <el-col :span="6">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 200px;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">至</el-col>
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 200px;"></el-date-picker>
          </el-col>
        </el-form-item>
        <span><b>优惠范围</b></span>
        <hr>

        <el-form-item label="适用房屋" :label-width="formLabelWidth" style="margin-left: 70px;">
          <el-select v-model="form.region" placeholder="指制定房屋">
            <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]" :props="defaultProps">
            </el-tree>
          </el-select>
        </el-form-item>

        <span><b>优惠规则</b></span>
        <hr>


        <span style="margin-left: 100px;">优惠</span> <el-select v-model="form.region" placeholder="折扣"
          style="width: 130px;">
          <el-option label="折扣" value="0"></el-option>
          <el-option label="减免" value="1"></el-option>
        </el-select>



        <span style="margin-left: 30px;">缴满</span> <el-input v-model="form.name" style="width: 130px;"
          placeholder="请输入"></el-input>个月,

        <span style="margin-left: 5px;">费用</span> <el-input v-model="form.name" style="width: 130px;"
          placeholder="请输入"></el-input>折<br><br><br>

        <span style="margin-top: 10px;margin-left: 120px;">说明: 缴满(所在年份,同一费用缴满月数),折扣、减免仅对所在年份账单生效。</span><br><br>
        <span style="margin-top: 10px;margin-left: 120px;">示例:设置折扣8.5折,则折后实收金额=应收金额*8.5*10%,折后金额保留两位小数(四舍五入);</span><br>
        <span><b>优惠费项</b></span>
        <hr>
        <span style="margin-left: 180px;"><b>费项</b></span>
        <div style="background-color: aqua; width: 500px;margin-left: 220px;">

          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="name" label="费用名称">
            </el-table-column>
            <el-table-column prop="price" label="单价">
            </el-table-column>
            <el-table-column prop="jisuan" label="计算公式">
            </el-table-column>
          </el-table>

        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>





  </div>
</template>

<script>
export default {
  data() {
    return {
      // 房间查询盒子值
      dialogTableVisible: false,
      // 业主查询盒子值
      dialogTableVisible2: false,
      // 新增优惠弹出框
      dialogFormVisible: false,
      form: {},
      tableData: [
        { name: '服务费', price: '100', jisuan: '100 * 0.05' },
        { name: '咨询费', price: '50', jisuan: '50 * 0.03' },
        { name: '管理费', price: '200', jisuan: '200 * 0.02' }
      ],
      pageNum: 1,
      pageSize: 7,
      total: 0,
      // 预存页面
      Dialog: false,
      pojo: {},

      form: {},

      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: [],

      JiaoFeiData: [
        {
          id: 1,
          gid: 'discount1',
          gname: '满 100 减 20',
          gdesc: '2023-08-01',
          gnum: '2023-08-31',
          gnum: '启用',
          gnum: '张三',
          gnum: '2023-08-26 10:00:00'
        },
        {
          id: 2,
          gid: 'discount2',
          gname: '新用户立减 10 元',
          gdesc: '2023-08-01',
          gnum: '2023-08-31',
          gnum: '启用',
          gnum: '李四',
          gnum: '2023-08-26 11:00:00'
        },
        {
          id: 3,
          gid: 'discount3',
          gname: '老用户 8 折优惠',
          gdesc: '2023-08-01',
          gnum: '2023-08-31',
          gnum: '启用',
          gnum: '王五',
          gnum: '2023-08-26 12:00:00'
        }
      ]

    };
  },
  methods: {
    // 删除
    Delete(billId) {
      this.$confirm('确认删除此费用？ 删除后将不可恢复，谨慎操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定按钮的操作
        this.$message.success('删除成功!');
      }).catch(() => {
        // 点击取消按钮的操作
        this.$message.info('已取消操作');
      });
    },
    // 启用
    Enable(billId) {
      this.$confirm('确认停用？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定按钮的操作
        this.$message.success('停用成功!');
      }).catch(() => {
        // 点击取消按钮的操作
        this.$message.info('已取消操作');
      });
    },

    // 编辑
    toUpdate(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    showDetails(rowId) {
      // 在这里根据 rowId 获取对应的详细信息，并将其填充到 form 中
      this.dialogFormVisible = true;
    },
    // 新增优惠弹出框
    Newoffers() {
      this.dialogFormVisible = true;
    },

    JyMx: function () {
      this.JyMxDialog = true;
    },
    // 查询
    findPage: function () {

    },
    // 收银台页面  去收费查询 跳转页面 按钮
    submitForm: function () {

    },
    // 作废账单记录按钮
    ZuoFei() {

    },
    // 预存
    Prexisted() {
      this.Dialog = true;
    },

    // 缴费情况 表操作 详情
    Detail() {

      this.PaymentDiv = false;
      this.DetailDiv = true;

    },
    //缴费情况标签页 返回按钮
    Out() {
      this.PaymentDiv = true;
      this.DetailDiv = false;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.findPage();
    },

  },
  //在实例化之后

  created() {
  },

};
</script>

<style>
.margin {
  width: 200px;
}

.jiaofei {
  width: 150px;
}

.box {
  margin-top: 1px;
  height: 100px;
  width: 100%;
}
</style>
